<template>
    <el-row type="flex" justify="space-between" align="middle" class="custom-banner">
        <el-col :span="6">
            <div class="banner-section">
                <i class="el-icon-document"></i>
                <span>试卷分析</span>
            </div>
        </el-col>
        <el-col :span="18">
            <div class="banner-section right">
                <span>题型得分分析 | 平均分：XX.X | 最高分：XX | 最低分：XX | 方差：X.XX</span>
            </div>
        </el-col>
    </el-row>
    <div>
        <input type="file" @change="handleFileUpload" />
        <el-table v-if="tableData.length" :data="tableData" style="width: 100%" border="vertical">
            <el-table-column v-for="header in headers" :key="header" :prop="header" :label="header"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import * as XLSX from 'xlsx';
import { ElTable, ElTableColumn } from 'element-plus';

const tableData = ref([]);
const headers = ref([]);

// 处理文件上传
const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
        const arrayBuffer = e.target.result;
        const data = new Uint8Array(arrayBuffer);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];

        // 将Excel表格转换为JSON格式
        const json = XLSX.utils.sheet_to_json(sheet, { header: 1 });
        // 假定表头在第三行
        headers.value = json[2];
        // 从第四行开始是常规数据，使用表头映射数据
        const regularData = json.slice(3).map((row) => {
            const rowData = {};
            row.forEach((cell, index) => {
                rowData[headers.value[index]] = cell;
            });
            return rowData;
        });

        // 特殊处理前两行，将它们转化为与常规行相同的格式
        const specialData = json.slice(0, 2).map((row) => {
            const specialRowData = {};
            headers.value.forEach((header, index) => {
                // 假设表头中的每一个都对应前两行中的某个单元格
                specialRowData[header] = row[index] || '';
            });
            return specialRowData;
        });

        // 合并特殊行和常规数据
        tableData.value = specialData.concat(regularData);
    };

    reader.readAsArrayBuffer(file);
};

</script>

<style scoped>
.custom-banner {
    background-color: #80b4e9;
    color: white;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.banner-section {
    display: flex;
    align-items: center;
}

.banner-section i {
    font-size: 20px;
    margin-right: 10px;
}

.banner-section.right {
    justify-content: flex-end;
}
</style>